<!DOCTYPE html>
<html>
<!-- 
	@author: 金夏溢
	@title: 广义货币占国内生产总值比重
 -->
<head lang="zh-CN">
	<meta charset="UTF-8">
	<title>广义货币占国内生产总值比重</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<!-- 引入Jquery -->
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

	<!-- 引入Bootstrap -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<!-- 引入BootStrap-table -->
	<link rel="stylesheet" href="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.css">
	<script src="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.js"></script>

	<!-- 引入Bootstrap-paginator -->
	<script src="../assets/libs/bootstrap-paginator-master/build/bootstrap-paginator.min.js"></script>

	<!-- 引入Echarts -->
	<script src="../assets/libs/echarts/echarts.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="page-header" style="text-align: center;">
		  <h1>广义货币占国内生产总值比重</h1>
		  <br>
		  <h1>Growth Rate of Money and Quasi Money</h1>
		</div>

	  	<table id="tableData"></table>

		<div class="page-header" style="text-align: center;">
		  <h2>广义货币占国内生产总值比重柱状图</h2>
		  <br>
		  <h2>Growth Rate of Money and Quasi Money</h2>
		</div>

		<div class="panel" style="margin-top: 40px;">
			<div id="main" style="width: 100%;height:400px;"></div>
		</div>

		  <div style="color: #666666; margin-top: 2em;">*此数据仅展现最近五年，若需全部数据请点击<a href="#" class="btn btn-info btn-xs">
		    <span class="glyphicon glyphicon-save"></span> 下载
		</a></div>

		<!-- <div style="text-align: right;"><div id="page"></div></div> -->
	</div>
</body>
<script>
	$('#tableData').bootstrapTable({
	    columns: [
	    {
	    	field: 'country',
	    	title: '国家或地区'
	    }, 
	    {
	    	field: 'year1',
	    	title: '2000年'
	    }, 
	    {
	    	field: 'year2',
	    	title: '2005年'
	    },
	    {
	    	field: 'year3',
	    	title: '2010年'
	    },
	    {
	    	field: 'year4',
	    	title: '2013年'
	    },
	    {
	    	field: 'year5',
	    	title: '2014年'
	    },
	    {
	    	field: 'year6',
	    	title: '2015年'
	    },
	    ],
	    data: [
	    {
	    	country: '阿尔巴尼亚',
	    	year1: '84.4',
	    	year2: '62.7',
	    	year3: '85.1',
	    	year4: '85.3',
	    	year5: '79.1',
	    	year6: '70.5',
	    }, 
	    {
	    	country: '爱沙尼亚',
	    	year1: '84.4',
	    	year2: '62.7',
	    	year3: '85.1',
	    	year4: '85.3',
	    	year5: '79.1',
	    	year6: '70.5',
	    }, 
	    {
	    	country: '保加利亚',
	    	year1: '84.4',
	    	year2: '62.7',
	    	year3: '85.1',
	    	year4: '85.3',
	    	year5: '79.1',
	    	year6: '70.5',
	    }, 
	    {
	    	country: '波兰',
	    	year1: '84.4',
	    	year2: '62.7',
	    	year3: '85.1',
	    	year4: '85.3',
	    	year5: '79.1',
	    	year6: '70.5',
	    }, 
	    {
	    	country: '黑山',
	    	year1: '84.4',
	    	year2: '62.7',
	    	year3: '85.1',
	    	year4: '85.3',
	    	year5: '79.1',
	    	year6: '70.5',
	    }, 
	    ]
	});

	var options={
	    bootstrapMajorVersion:1,    //版本
	    currentPage:1,    //当前页数
	    numberOfPages:5,    //最多显示Page页
	    totalPages:10,    //所有数据可以显示的页数
	    onPageClicked:function(e,originalEvent,type,page){


	    }
	}
	$("#page").bootstrapPaginator(options);

	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	var dataS='["2000年","2005年","2010年","2013年","2014年","2015年"]';
	var dataNames='["zero","five","ten","thirteen","fourteen","fiveteen"]';
	var pageViews='[{"country":"阿尔巴尼亚","five":"62.7","fiveteen":"70.5","fourteen":"79.1","id":1,"pojoName":"theproportionofbroadmoneytogdp","ten":"85.1","thirteen":"85.3","zero":"84.4"},{"country":"爱沙尼亚","five":"27.9","fiveteen":"62.4","fourteen":"58.2","id":2,"pojoName":"theproportionofbroadmoneytogdp","ten":"　/","thirteen":"　/","zero":"/　"},{"country":"保加利亚","five":"35.3","fiveteen":"53.8","fourteen":"68.8","id":3,"pojoName":"theproportionofbroadmoneytogdp","ten":"82.0","thirteen":"81.3","zero":"85.6"},{"country":"波兰","five":"40.5","fiveteen":"43.4","fourteen":"54.2","id":4,"pojoName":"theproportionofbroadmoneytogdp","ten":"59.1","thirteen":"61.6","zero":"64.6"},{"country":"黑山","five":"　/","fiveteen":"　/","fourteen":"　/","id":5,"pojoName":"theproportionofbroadmoneytogdp","ten":"　/","thirteen":"/　","zero":"/　"},{"country":"捷克共和国","five":"60.9","fiveteen":"55.7","fourteen":"69.8","id":6,"pojoName":"theproportionofbroadmoneytogdp","ten":"77.1","thirteen":"78.2","zero":"80.4"},{"country":"克罗地亚","five":"40.3","fiveteen":"57.7","fourteen":"77.5","id":7,"pojoName":"theproportionofbroadmoneytogdp","ten":"69.1","thirteen":"69.9","zero":"71.9"},{"country":"拉脱维亚","five":"27.4","fiveteen":"42.5","fourteen":"　/","id":8,"pojoName":"theproportionofbroadmoneytogdp","ten":"　/","thirteen":"　/","zero":"/　"},{"country":"立陶宛","five":"22.7","fiveteen":"40.9","fourteen":"　/","id":9,"pojoName":"theproportionofbroadmoneytogdp","ten":"　/","thirteen":"　/","zero":"/　"},{"country":"罗马尼亚","five":"32.0","fiveteen":"33.4","fourteen":"38.0","id":10,"pojoName":"theproportionofbroadmoneytogdp","ten":"37.9","thirteen":"39.2","zero":"40.2"}]';

		var datas = eval('(' + dataS + ')');
		var dataName = eval('(' + dataNames + ')');
		var pageView = eval('(' + pageViews + ')');
		
		var contry=new Array();
		var seriesData=new Array();
		for(var i=0;i<datas.length;i++){
			var obj=new Object();
			obj.name=datas[i];
			obj.type='bar';
			obj.data=new Array();
			seriesData.push(obj);
		}
		for(var i=0;i<pageView.length;i++){
			
	// 		var d=transform(pageView[i]);
			var contrys=pageView[i];
			var c=contrys['country'];
			contry.push(c);
		}
		
			var i=0;
			for(var j=0;j<dataName.length;j++){
				for(var k=0;k<pageView.length;k++){
					var b=pageView[k];
					var c=b[dataName[j]];
				seriesData[i].data.push(c);
				}
				i++;
		}
		function transform(obj){
		    var arr = [];
		    for(var item in obj){
		        arr.push(obj[item]);
		    }
		    return arr;
		}
	// 	app.title = '堆叠柱状图';

		option = {
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    legend: {
		        data:datas
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            data : contry
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    series : seriesData
		};


	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>
</html>